<template>
	<view class="goods-info">
		<view class="store-info" @click="gotoStore">
			<view class="store-left">
				<view class="store-pic">
					<image :src="$imageUrl + store.logo"></image>
				</view>
				<view class="store-name">
					{{ store.storeName }}
				</view>
			</view>
			<view class="store-right">
				<text>进入店铺</text>
				<uni-icons type="forward"></uni-icons>
			</view>
		</view>
		<view class="goods-box" @click="gotoGoodsDetail">
			<view class="goods-left">
				<image :src="$imageUrl + goods.goodsImg"></image>
			</view>
			<view class="goods-right">
				<view class="wrapper">
					<view class="goods-name">
						{{ goods.goodsName }}
					</view>
					<view class="goods-setting">
						{{ goods.goodsOptions }} 数量×{{ goods.goodsCount }}
					</view>
				</view>
				<view class="goods-price">
					<text>￥{{ goods.goodsPrice }}</text>
				</view>
			</view>
		</view>
		<view class="goods-bottom">
			小计:<text>￥{{ goods.goodsPrice * goods.goodsCount }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-order-goods",
		props: {
			goods: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				store: {}
			}
		},
		created() {
			this.storeInfo()
		},
		methods: {
			async storeInfo() {
				const { data: res } = await uni.$http.get(`/stores/goods/${this.goods.goodsId}`)
				this.store = res.data
			},
			gotoStore() {
				uni.navigateTo({
					url: `/subcontract/store/store?storeId=${this.store.id}`
				})
			},
			gotoGoodsDetail() {
				uni.navigateTo({
					url: `/subcontract/goods_detail/goods_detail?goodsId=${this.goods.goodsId}`
				})
			}
		}
	}
</script>

<style lang="scss">
.goods-info {
	width: 100%;
	margin: 20rpx 0;
	border-radius: 8rpx;
	background-color: #fff;
	.store-info {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		.store-left {
			display: flex;
			font-size: 12px;
			align-items: center;
		}
		.store-pic {
			width: 25px;
			height: 25px;
			margin-right: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.store-right {
			display: flex;
			font-size: 12px;
			align-items: center;
		}
	}
	.goods-box {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
		.goods-left {
			width: 80px;
			height: 80px;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.goods-right {
			width: 70%;
			display: flex;
			justify-content: space-between;
			.wrapper {
				width: 70%;
			}
			.goods-name {
				font-size: 12px;
				overflow: hidden; //多出的隐藏
				//text-overflow: ellipsis;//多出部分用...代替
				display: -webkit-box; //定义为盒子模型显示
				-webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
				-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
			}
			.goods-setting {
				color: #999;
				font-size: 12px;
				margin-top: 10rpx;
			}
			.goods-price {
				font-size: 13px;
				text-align: center;
				font-weight: bold;
			}
		}
	}
	.goods-bottom {
		padding: 30rpx;
		// text-align: end;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text {
			font-size: 16px;
			font-weight: bold;
		}
	}
}
</style>